<template>
	<view class="detail-container">

		<!-- 文章主体内容 -->
		<view class="article-content">
			<view class="article-header">
				<text class="article-title">{{ detail.title }}</text>
				<view class="article-info">
					<text class="article-source">{{ detail.author }}</text>
					<text class="article-date">{{ detail.date }}</text>
				</view>
			</view>

			<!-- 文章封面图 -->
			<view class="article-cover" v-if="detail.avatar">
				<image :src="detail.avatar" mode="widthFix"></image>
			</view>

			<!-- 文章内容 -->
			<rich-text class="article-text" :nodes="detail.content"></rich-text>

			<!-- 标签 -->
			<view class="article-tags">
				<text class="tag-item">{{ detail.label }}</text>
				<image class="collImg"
					:src="detail.collected ? '/static/doctors/collected.png' : '/static/doctors/uncollect.png'"
					mode="aspectFill" @click="collectDoc(detail.id)"></image>
			</view>

		</view>

		<!-- 相关推荐 -->
		<view class="related-section">
			<view class="section-header">
				<text class="section-title">相关阅读</text>
			</view>
			<view class="related-list">
				<view class="related-item" v-for="(item, index) in relatedArticles" :key="index"
					@click="goToDetail(item.id, item.type)">
					<image class="related-image" :src="item.image || '/static/default_thumb.png'"></image>
					<view class="related-info">
						<text class="related-title">{{ item.title }}</text>
						<text class="related-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载中提示 -->
		<view class="loading" v-if="isLoading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globaApi: '',
				id: '',
				type: '',
				coverImage: '',
				isLiked: false,
				isCollected: false,
				likeCount: 0,
				commentCount: 0,
				isLoading: true,
				collectDocSrc: '/static/doctors/uncollect.png',
				detail: {
					id: 1,
					title: '',
					author: '',
					date: '',
					avatar: '',
					content: '',
					label: [],
					collected: false
				},
				relatedArticles: []
			};
		},
		onLoad(options) {
			this.globaApi = getApp().globalData.baseUrl
			this.coverImage = options.coverImage
			this.id = options.id;
			this.fetchDetailData();
			this.getMessage()
			this.getRelatedArticles()

		},
		methods: {
			// 获取详情数据
			fetchDetailData() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
				}, 800)
				// 这里模拟API请求，实际使用中应替换为真实接口调用

			},
			collectDoc(options) {
				console.log(options);
				uni.request({
					url: `${this.globaApi}/collect/collectByUserId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					data: {
						newsId: options,
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '收藏成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.message || '收藏失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})

			},
			async getMessage() {
				uni.request({
					url: `${this.globaApi}/news/getNewsById`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: this.id
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.detail = res.data.data
						} else {
							uni.showToast({
								title: res.data.message || '查询失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})

			},
			// 获取相关推荐
			getRelatedArticles() {
				// 模拟相关推荐数据库，针对每种类型的不同ID文章提供不同的推荐
				const relatedRecommendations = {
					news: {
						'1': [ // 针对"新型疫苗研发取得重大突破"的相关推荐
							{
								id: '2',
								type: 'news',
								title: '医学研究发现新的治疗方法',
								desc: '最新免疫学研究为自身免疫疾病患者带来希望',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'topic',
								title: '糖尿病专题研究',
								desc: '全面了解糖尿病的最新研究进展和管理方法',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'article',
								title: '秋季养生的关键要点',
								desc: '调整秋季生活习惯的实用建议与养生方法',
								image: '/static/message/message-test.jpg'
							}
						],
						'2': [ // 针对"医学研究发现新的治疗方法"的相关推荐
							{
								id: '1',
								type: 'news',
								title: '新型疫苗研发取得重大突破',
								desc: 'mRNA技术在疫苗领域取得新突破',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'topic',
								title: '心血管疾病防治',
								desc: '心血管疾病的预防、诊断和治疗最新进展',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'article',
								title: '合理饮食预防疾病',
								desc: '通过科学饮食预防常见慢性疾病',
								image: '/static/message/message-test.jpg'
							}
						]
					},
					article: {
						'1': [ // 针对"秋季养生的关键要点"的相关推荐
							{
								id: '2',
								type: 'article',
								title: '合理饮食预防疾病',
								desc: '通过科学饮食预防常见慢性疾病',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'tutorial',
								title: '体温计的正确使用方法',
								desc: '家用体温计的正确使用方法与注意事项',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'news',
								title: '新型疫苗研发取得重大突破',
								desc: 'mRNA技术在疫苗领域取得新突破',
								image: '/static/message/message-test.jpg'
							}
						],
						'2': [ // 针对"合理饮食预防疾病"的相关推荐
							{
								id: '1',
								type: 'article',
								title: '秋季养生的关键要点',
								desc: '调整秋季生活习惯的实用建议与养生方法',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'topic',
								title: '糖尿病专题研究',
								desc: '全面了解糖尿病的最新研究进展和管理方法',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'tutorial',
								title: '血压计的操作指南',
								desc: '家用电子血压计的正确使用方法与血压监测',
								image: '/static/message/message-test.jpg'
							}
						]
					},
					topic: {
						'1': [ // 针对"糖尿病专题研究"的相关推荐
							{
								id: '2',
								type: 'topic',
								title: '心血管疾病防治',
								desc: '心血管疾病的预防、诊断和治疗最新进展',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'article',
								title: '合理饮食预防疾病',
								desc: '通过科学饮食预防常见慢性疾病',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'tutorial',
								title: '血压计的操作指南',
								desc: '家用电子血压计的正确使用方法与血压监测',
								image: '/static/message/message-test.jpg'
							}
						],
						'2': [ // 针对"心血管疾病防治"的相关推荐
							{
								id: '1',
								type: 'topic',
								title: '糖尿病专题研究',
								desc: '全面了解糖尿病的最新研究进展和管理方法',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'news',
								title: '医学研究发现新的治疗方法',
								desc: '最新免疫学研究为自身免疫疾病患者带来希望',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'tutorial',
								title: '血压计的操作指南',
								desc: '家用电子血压计的正确使用方法与血压监测',
								image: '/static/message/message-test.jpg'
							}
						]
					},
					tutorial: {
						'1': [ // 针对"体温计的正确使用方法"的相关推荐
							{
								id: '2',
								type: 'tutorial',
								title: '血压计的操作指南',
								desc: '家用电子血压计的正确使用方法与血压监测',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'article',
								title: '秋季养生的关键要点',
								desc: '调整秋季生活习惯的实用建议与养生方法',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '1',
								type: 'news',
								title: '新型疫苗研发取得重大突破',
								desc: 'mRNA技术在疫苗领域取得新突破',
								image: '/static/message/message-test.jpg'
							}
						],
						'2': [ // 针对"血压计的操作指南"的相关推荐
							{
								id: '1',
								type: 'tutorial',
								title: '体温计的正确使用方法',
								desc: '家用体温计的正确使用方法与注意事项',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'topic',
								title: '心血管疾病防治',
								desc: '心血管疾病的预防、诊断和治疗最新进展',
								image: '/static/message/message-test.jpg'
							},
							{
								id: '2',
								type: 'article',
								title: '合理饮食预防疾病',
								desc: '通过科学饮食预防常见慢性疾病',
								image: '/static/message/message-test.jpg'
							}
						]
					}
				};

				// 根据当前文章类型和ID获取对应的推荐
				if (relatedRecommendations[this.type] && relatedRecommendations[this.type][this.id]) {
					this.relatedArticles = relatedRecommendations[this.type][this.id];
				} else {
					// 如果没有特定的推荐，提供一些通用推荐
					this.relatedArticles = [{
							id: '1',
							type: 'news',
							title: '新型疫苗研发取得重大突破',
							desc: 'mRNA技术在疫苗领域取得新突破',
							image: '/static/message/5.png'
						},
						{
							id: '1',
							type: 'article',
							title: '秋季养生的关键要点',
							desc: '调整秋季生活习惯的实用建议与养生方法',
							image: '/static/message/1-3.png'
						},
						{
							id: '1',
							type: 'topic',
							title: '糖尿病专题研究',
							desc: '全面了解糖尿病的最新研究进展和管理方法',
							image: '/static/message/10.png'
						}
					];
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 跳转到其他详情
			goToDetail(id, type) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}&type=${type}`
				});
			},

			// 点赞功能
			handleLike() {
				this.isLiked = !this.isLiked;
				if (this.isLiked) {
					this.likeCount++;
				} else {
					this.likeCount--;
				}
				// 实际应用中应调用API更新点赞状态
				uni.showToast({
					title: this.isLiked ? '点赞成功' : '取消点赞',
					icon: 'none'
				});
			},

			// 评论功能
			handleComment() {
				uni.navigateTo({
					url: `/pages/comment/comment?id=${this.id}&type=${this.type}`
				});
			},

			// 收藏功能
			handleCollect() {
				this.isCollected = !this.isCollected;
				// 实际应用中应调用API更新收藏状态
				uni.showToast({
					title: this.isCollected ? '收藏成功' : '取消收藏',
					icon: 'none'
				});
			},

			// 分享功能
			shareContent() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title: this.detail.title,
					summary: this.detail.title,
					imageUrl: this.detail.coverImage,
					success: function(res) {
						console.log("分享成功：", res);
					},
					fail: function(err) {
						console.log("分享失败：", err);
					}
				});
			}
		}
	};
</script>

<style>
	.detail-container {
		padding-bottom: 100rpx;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		z-index: 999;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-icon,
	.share-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconfont {
		font-size: 40rpx;
		color: #333;
	}

	.article-content {
		margin-top: 30rpx;
		padding: 30rpx;
	}

	.article-header {
		margin-bottom: 30rpx;
	}

	.article-title {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1.4;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.article-info {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.article-source {
		margin-right: 20rpx;
	}

	.article-cover {
		margin-bottom: 30rpx;
	}

	.article-cover image {
		width: 100%;
		border-radius: 12rpx;
	}

	.article-text {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;
		margin-bottom: 30rpx;
	}

	.article-tags {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
	}

	.tag-item {
		padding: 6rpx 20rpx;
		background-color: #f5f7fa;
		color: #409EFF;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.collImg {
		width: 40rpx;
		height: 40rpx;
		margin-left: 100rpx;
	}

	.related-section {
		padding: 0 30rpx 30rpx;
	}

	.section-header {
		margin-bottom: 20rpx;
		border-left: 6rpx solid #409EFF;
		padding-left: 20rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.related-list {
		display: flex;
		flex-direction: column;
	}

	.related-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.related-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.related-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.related-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.related-desc {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.interaction-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding: 0 20rpx;
	}

	.interaction-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 40rpx;
	}

	.interaction-count {
		font-size: 20rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.share-btn {
		flex: 1;
		height: 70rpx;
		background-color: #409EFF;
		color: #fff;
		border-radius: 35rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		color: #FF6B6B;
	}

	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.loading-text {
		font-size: 30rpx;
		color: #666;
	}
</style>